<template>
  <el-dialog v-model="visible" title="编辑" width="500" append-to-body>
    <div style="margin-bottom: 20px">
      <el-input
        v-model="inputValue"
        style="width: 450px"
        size="small"
        autosize
        maxlength="100"
        show-word-limit
        placeholder=""
      >
        <template v-if="!!afterValue" #append>.{{ afterValue }}</template>
      </el-input>
    </div>
    <template #footer>
      <div class="footer">
        <el-button size="small" @click.stop="handleCancel">取消</el-button>
        <el-button size="small" type="primary" @click.stop="handleSure">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, defineExpose, watch } from "vue";
  const visible = ref(false);
  const emit = defineEmits();
  defineExpose({
    visible,
  });
  const props = defineProps(["activeNode"]);
  const inputValue = ref("");
  const afterValue = ref("");

  watch(
    () => props.activeNode?.fileName,
    (newName) => {
      const arr = newName.split(".");
      afterValue.value = arr.length > 1 ? arr[arr.length - 1] : "";
      inputValue.value = arr[0];
    },
  );

  /**
   * @description 处理取消
   */
  const handleCancel = () => {
    emit("handleCancel");
  };

  /**
   * @description 处理确定
   */
  const handleSure = () => {
    visible.value = false;
    emit(
      "handleSure",
      afterValue.value
        ? inputValue.value + "." + afterValue.value
        : inputValue.value,
    );
  };
</script>

<style scoped lang="scss">
  @import url("@/components/xde-ui-plus/style.css");
  .footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
